<template>
  <div class="box" >
    <div class="above">
      <img  :src="state.backImg" alt="">
      <div class="above-top">
        <div class="top-left"><van-icon name="search" color="white" size="22px" /></div>
        <div class="top-right"><van-icon name="setting-o" color="white" size="22px" @click="goSet" /></div>
      </div>
      <div class="above-down">
        <div class="left"><img :src="state.head" alt=""></div>
        <div class="right">
          <div class="name">{{state.userName}}</div>
          <div class="account">账号：{{state.phone  }}</div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle-head">
        <span><strong>0</strong> 获赞</span>
        <span><strong>{{state.friends}}</strong> 朋友</span>
        <span><strong>0</strong> 关注</span>
        <span><strong>0</strong> 粉丝</span>
      </div>
      <div class="middle-center">
        <span>{{ state.userSign }}</span>
      </div>
      <div class="middle-foot">
        <van-button type="dark" class="button1">编辑资料</van-button>
        <van-button type="dark" class="button2">添加朋友</van-button>
      </div>
    </div>
    <div class="tail">
      <van-tabs>
        <van-tab title="作品"><Addwork :userId="state.token"/></van-tab>

        <van-tab title="收藏">收藏</van-tab>
        <van-tab title="喜欢">喜欢</van-tab>
      </van-tabs>
    </div>

  </div>


<!-- <div class="miss" v-else>
  <div class="login" v-if="state.isLoginPage" >
    <div class="login-head">登录</div>
    <div class="login-content">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="state.phone" name="用户名" label="账号" placeholder="账号" />
          <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="login-register" @click="change">
      <p>没有账号?点击注册</p>
    </div>
  </div>

  <div class="register" v-else>
    <div class="register-head">注册</div>
    <div class="register-content">
      <van-form>
        <van-cell-group inset>
          <van-field v-model="state.phone" name="用户名" label="账号" placeholder="账号" />
          <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码" />
          <van-field v-model="state.password2" type="password" name="密码" label="确认密码" placeholder="确认密码" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="login-register" @click="change">
      <p>已有账号?点击登录</p>
    </div>
  </div>

</div> -->



  <Foot />
</template>

<script setup>
import Foot from '@/components/footBar.vue'
import Addwork from '@/components/pages/addwork.vue'
import axios from '@/api'
import { reactive } from 'vue';
import {useStore} from 'vuex'
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useStore()
const state = reactive({
  isLogin: false,
  isLoginPage:true,
  data:[],
  phone: '',
  password: '',
  password2: '',
  backImg:'',
  head:'',
  userName:'',
  phone:'',
  friends:'',
  userSign:'',
  token:window.localStorage.getItem('userToken'),
  userId:''
})
// const change = () => {
//   state.isLoginPage = !state.isLoginPage
// }
if(window.localStorage.getItem('userToken')){

}else{
  router.push('loginPage')
}
onMounted( async() => {
  // console.log(store.state.userInfo);]
  if (localStorage.getItem('userToken')){
    try {
    const { data } = await axios.get('users/userdata',{
      params:{
        userId : localStorage.getItem('userToken')
      }
    })
    // console.log(data);
    state.backImg = data[0].backImg
    state.head = data[0].head
    state.userName = data[0].userName
    state.phone = data[0].phone
    state.friends = data[0].friends
    state.userSign = data[0].userSign
    state.userId = data[0].userId
    state.isLogin = true
    state.token = localStorage.getItem('userToken')
  } catch (error) {
    console.log(error)
  }
  state.isLogin = true
}

  // store.dispatch('changeAction')
  // state.isLogin = store.dispatch('changeAction')
 
})

// const onSubmit = async() => {
//   // console.log(store.state.userInfo);
//   try {
//     const { data } = await axios.get('users/login',{
//       params:{
//         phone: state.phone,
//         password: state.password
//       }
//     })
//     console.log(data);
//     state.backImg = data[0].backImg
//     state.head = data[0].head
//     state.userName = data[0].userName
//     state.phone = data[0].phone
//     state.friends = data[0].friends
//     state.userSign = data[0].userSign
//     localStorage.setItem("userToken",data[0].userId);
//   } catch (error) {
//     console.log(error)
//   }
//   // store.dispatch('changeAction')
//   // state.isLogin = store.dispatch('changeAction')
// }

const goSet= ()=> {
  router.push('/setPage')
}
</script>

<style lang="less" scoped>
// .login {
//   margin-top: 5rem;

//   .login-head {
//     text-align: center;
//     font-size: 0.5rem;
//     margin-bottom: 1rem;
//   }

//   .login-register {
//     text-align: center;
//     font-size: 0.25rem;
//     margin-top: 1rem;
//     color: lightblue;
//   }

// }

// .register {
//   margin-top: 5rem;

//   .register-head {
//     text-align: center;
//     font-size: 0.5rem;
//     margin-bottom: 1rem;
//   }

//   .login-register {
//     text-align: center;
//     font-size: 0.25rem;
//     margin-top: 1rem;
//     color: lightblue;
//   }

// }


.box {
  position: relative;
  height: 100%;
  width: 100%;
  padding-bottom: 50px;
 

  .above {
    height: 6.5rem;
   
    position: relative;
    img{
      width: 10rem;
      height: 6.5rem;
      background: no-repeat;
      background-size: cover;
    }
    .above-top {
      display: flex;
      position: absolute;
      top: 5px;
      right: 5px;

      .top-left {
        margin-right: 5px;
        background: rgb(32, 33, 33);
        border-radius: 50%;
        opacity: 0.6;
        padding: 2px 2px;
      }

      .top-right {
        margin-right: 5px;
        background: rgb(14, 14, 14);
        border-radius: 50%;
        opacity: 0.6;
        padding: 2px 2px;
      }
    }

    .above-down {
      display: flex;
      align-items: center;
      position: absolute;
      left: 10px;
      bottom: 50px;

      .left {
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }

      .right {
        margin-left: 15px;

        .name {
          font-size: 20px;
          color: #000;
        }

        .account {
          margin-top: 5px;
          font-size: 10px;
          color: #000;
        }
      }
    }
  }

  .middle {
    position: absolute;
    width: 100%;
    top: 5.5rem;
    left: 0;
    border-radius: 15px;
    background-color: #fff;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;

    .middle-head {
      span {
        margin-right: 15px;
        font-size: 15px;
        color: darkgrey;

        strong {
          color: black;
        }
      }
    }

    .middle-center {
      margin-top: 15px;

      span {
        font-size: 15px;
      }
    }

    .middle-foot {
      margin-top: 15px;
      justify-content: space-between;
      display: flex;
      align-items: center;

      .button1,
      .button2 {
        width: 165px;
        border: 0;
      }

    }
  }

  .tail {
    position: absolute;
    top: 8.75rem;
    width: 100%;
  }
}
</style>